<!--
 * @Author: DESKTOP-05FP536\Administrator 18368095041@163.com
 * @Date: 2025-01-15 11:04:15
 * @LastEditors: DESKTOP-05FP536\Administrator 18368095041@163.com
 * @LastEditTime: 2025-01-15 17:45:21
 * @FilePath: \road-admin-web\src\views\system\MyInfo\MyInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import { useEnum } from '@/service/useEnum';

import { useForm } from './useForm';
import { usePassword, PasswordWithConfirmParam } from './usePassword';

const formRef = ref();

const {
    rules,
    myInfoParam,
    infoLoading,
    handleSubmit,
    updateLoading,
    getDetail
} = useForm(formRef);

const form2Ref = ref();

const {
    passwordParam,
    updatepasswordLoading,
    reset: resetPassword,
    handleSubmit: handlePasswordSubmit,
    passwordRules
} = usePassword(form2Ref);

const { enumRecords } = useEnum(['genderType']);
</script>

<template>
    <div class="page-container">
        <CustomCard title="" :canCollapse="false" class="mb-[20px]">
            <el-form
                ref="formRef"
                :rules="rules"
                :model="myInfoParam"
                v-loading="infoLoading"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="手机号"
                            prop="mobile"
                            label-width="80px"
                        >
                            <el-input v-model="myInfoParam.mobile" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="姓名"
                            prop="name"
                            label-width="80px"
                        >
                            <el-input v-model="myInfoParam.name" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="用户头像"
                            prop="avatarId"
                            label-width="80px"
                        >
                            <PicsUpload
                                :file-list="[myInfoParam.avatarId]"
                                remark="用户头像"
                                :limit="1"
                                @success="
                                    (data) => {
                                        myInfoParam.avatarId = data[0].data;
                                    }
                                "
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="性别"
                            prop="gender"
                            label-width="80px"
                        >
                            <el-select v-model="myInfoParam.gender" clearable>
                                <el-option
                                    v-for="(
                                        item, index
                                    ) in enumRecords.genderType"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item
                            label="邮箱"
                            prop="email"
                            label-width="80px"
                        >
                            <el-input v-model="myInfoParam.email" />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="flex-row jc-center">
                    <el-button
                        type="primary"
                        @click.stop="handleSubmit"
                        :loading="updateLoading"
                        >提交</el-button
                    >
                    <el-button @click.stop="() => getDetail()">重置</el-button>
                </el-row>
            </el-form>
        </CustomCard>

        <CustomCard title="" :canCollapse="false">
            <el-form
                ref="form2Ref"
                :rules="passwordRules"
                :model="passwordParam"
            >
                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="原密码"
                            prop="originPassword"
                            label-width="120px"
                        >
                            <el-input
                                v-model="passwordParam.originPassword"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="新密码"
                            prop="newPassword"
                            label-width="120px"
                        >
                            <el-input
                                v-model="passwordParam.newPassword"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item
                            label="确认新密码"
                            prop="confirmPassword"
                            label-width="120px"
                        >
                            <el-input
                                v-model="passwordParam.confirmPassword"
                                type="password"
                                show-password
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row class="flex-row jc-center">
                    <el-button
                        type="primary"
                        @click.stop="handlePasswordSubmit"
                        :loading="updatepasswordLoading"
                        >提交</el-button
                    >
                    <el-button @click.stop="resetPassword">重置</el-button>
                </el-row>
            </el-form>
        </CustomCard>
    </div>
</template>
